<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
</head>
<body>
    <header class="aui-bar aui-bar-nav">
        <div class="aui-pull-left aui-btn" tapmode="tap-active" onclick="api.closeWin(this)">
            <span class="aui-iconfont aui-icon-left"></span>
        </div>
        <div class="aui-title">材料管理</div>
    </header>
    <div class="aui-tab" id="tabs">
        <div class="aui-tab-item aui-active" tapmode="tap-active" onclick="handleTab(this)">待办</div>
        <div class="aui-tab-item" tapmode="tap-active" onclick="handleTab(this)">已办</div>
    </div>
    <div class="slide_page_panel"></div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/aui-tab.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function() {
        // 侵入式头部
        $api.fixStatusBar($api.dom('header'));
        // aui tab事件
        let tab = new auiTab({
            element: document.getElementById("tabs")
        }, function(ret) {
            api.setFrameGroupIndex({
                name: 'dblistframe',
                index: ret.index - 1,
                scroll: true,
                reload: true
            });
        });
        // 监听自定义事件
        api.addEventListener({
            name: 'frameGroupChangeEvent'
        }, function(ret, err) {
            if (ret) {
                tab.setActive(ret.value.id + 1);
            }
        });
        initgroup();
    };

    function initgroup() {
        var headerH = $api.offset($api.dom('header')).h;
        var tabH = $api.offset($api.dom('.aui-tab')).h;
        const framegroup = [{
            name: 'frame1',
            scrollEnabled: true,
            url: './tabs/db.html',
            bounces:true,
            bgColor: 'rgba(0,0,0,.3)'
        }, {
            name: 'frame2',
            scrollEnabled: true,
            url: './tabs/yb.html',
            bounces:true,
            bgColor: 'rgba(0,0,0,.3)',
        }];
        api.openFrameGroup({
            name: 'dblistframe',
            background: '#fff',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: headerH + tabH,
                w: 'auto',
                h: api.frameHeight - parseInt(tabH)
            },
            index: 0,
            frames: framegroup
        }, function(ret, err) {
            if (ret) {
                api.sendEvent({
                    name: 'frameGroupChangeEvent',
                    extra: {
                        id: ret.index
                    }
                });
            }
        });
    }
    // tab切换
    function handleTab(tag) {
        let defaultIndex = 0;
        const tabs = $api.domAll('.aui-tab .aui-tab-item');
        const activeNode = $api.dom('.aui-tab .aui-active');
        if (tag === activeNode) return;
        for (let i = 0; i < tabs.length; i++) {
            if (tag === tabs[i]) {
                defaultIndex = i;
            } else {
                $api.removeCls(tabs[i], 'aui-active');
            }
        }
        $api.addCls(tabs[defaultIndex], 'aui-active');
    }
</script>

</html>
